import { useMount, useReactive } from "ahooks"
import { getData2 } from '../Data'
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'
import { FlexGridDetail } from '@grapecity/wijmo.react.grid.detail'
import { useState } from "react"

import { Select } from "antd";


const WijmoC05 = () => {

    const InitData = useReactive({
        detailVisibilityMode: 'ExpandSingle',
        maxHeight: 400,
        isAnimated: true,
        keyActionEnter: 'None',
        evenRowHasDetail: false,
        rowHasDetailFn: (e, s) => { return s === 1 ? e.dataItem.downloads >= 10000 : e.dataItem.downloads < 10000 }
    })
    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })
    if (Data) {
        return (
            <div className='Page'>
                <FlexGrid itemsSource={Data} isReadOnly>
                    <FlexGridColumn header="country Name" binding="country" width="*" />
                    <FlexGridColumn header="downloads" binding="downloads" width="2*" />
                    <FlexGridDetail
                        detailVisibilityMode={InitData.detailVisibilityMode}
                        maxHeight={InitData.maxHeight}
                        isAnimated={InitData.isAnimated}
                        keyActionEnter={InitData.keyActionEnter}
                        rowHasDetail={e => !InitData.evenRowHasDetail ? true : InitData.rowHasDetailFn(e, InitData.evenRowHasDetail)}
                        template={() => {
                            return (
                                <FlexGrid itemsSource={Data} isReadOnly>
                                    <FlexGridColumn header="num01" binding="num01" />
                                    <FlexGridColumn header="num02" binding="num02" />
                                    <FlexGridColumn header="num03" binding="num03" />
                                    <FlexGridColumn header="num04" binding="num04" />
                                    <FlexGridColumn header="num05" binding="num05" />
                                    <FlexGridColumn header="num06" binding="num06" />
                                    <FlexGridColumn header="num07" binding="num07" />
                                    <FlexGridColumn header="num08" binding="num08" />
                                    <FlexGridColumn header="num09" binding="num09" />
                                    <FlexGridColumn header="num10" binding="num10" />
                                </FlexGrid>
                            )
                        }}
                    />
                </FlexGrid>

                <div className="Label">
                    <label htmlFor="">展开方式</label>
                    <Select
                        defaultValue={InitData.detailVisibilityMode}
                        onChange={e => InitData.detailVisibilityMode = e}
                        options={[
                            { value: 'Code', label: '禁用' },
                            { value: 'Selection', label: '双击' },
                            { value: 'ExpandSingle', label: '展开单个' },
                            { value: 'ExpandMulti', label: '展开多个' },
                        ]}
                    />
                </div>
                <div className="Label">
                    <label htmlFor="">内部行高</label>
                    <Select
                        defaultValue={InitData.maxHeight}
                        onChange={e => InitData.InitData = e}
                        options={[
                            { value: 0, label: '自动 (HTML 内容无视行高 可CSS限制) (React版本问题 须提前预设)' },
                            { value: 100, label: 100 },
                            { value: 200, label: 200 },
                            { value: 300, label: 300 },
                            { value: 400, label: 400 },
                        ]}
                    />
                </div>
                <div className="Label">
                    <label htmlFor="">开启动画</label>
                    <Select
                        defaultValue={InitData.isAnimated}
                        onChange={e => InitData.isAnimated = e}
                        options={[
                            { value: true, label: '启动' },
                            { value: false, label: '禁用' },
                        ]}
                    />
                </div>
                <div className="Label">
                    <label htmlFor="">回车展开</label>
                    <Select
                        defaultValue={InitData.keyActionEnter}
                        onChange={e => InitData.keyActionEnter = e}
                        options={[
                            { value: 'None', label: '换行' },
                            { value: 'ToggleDetail', label: '展开 (无视展开方式限制)' },
                        ]}
                    />
                </div>
                <div className="Label">
                    <label htmlFor="">展开限制</label>
                    <Select
                        defaultValue={InitData.evenRowHasDetail}
                        onChange={e => InitData.evenRowHasDetail = e}
                        options={[
                            { value: false, label: '全部' },
                            { value: 1, label: 'downloads 大于 一个大不了' },
                            { value: 2, label: 'downloads 小于 一个大不了' },
                        ]}
                    />
                </div>

            </div>
        )
    }
}

export default WijmoC05;